<template>
	<el-form v-if="curComponentList.length === 1" label-width="60px">
		<el-form-item label="名称">
			<el-input v-model="curComponentList[0].text" placeholder=""></el-input>
		</el-form-item>
		<el-form-item label="x坐标">
			<el-input type="number" v-model="directionX" placeholder="">
				<template #append>cm</template>
			</el-input>
		</el-form-item>
		<el-form-item label="y坐标">
			<el-input type="number" v-model="directionY" placeholder="">
				<template #append>cm</template>
			</el-input>
		</el-form-item>
		<el-form-item label="长">
			<el-input
				type="number"
				v-model="curLength"
				placeholder=""
				@blur="changePositionHandle('length')"
			>
				<template #append>cm</template>
			</el-input>
		</el-form-item>
		<el-form-item label="宽">
			<el-input
				type="number"
				v-model="curWidth"
				placeholder=""
				@blur="changePositionHandle('width')"
			>
				<template #append>cm</template>
			</el-input>
		</el-form-item>
	</el-form>
	<div v-else>请先选择组件</div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import useCurComponent from "@/src/store/component";
import useCommon from "@/src/store/common";
import useTopology from "@/src/store/topology";

const commonStore = useCommon();
const curComponentStore = useCurComponent();
const useTopologyStore = useTopology();
const { topology } = storeToRefs(useTopologyStore);

const { curComponent: curComponentList } = storeToRefs(curComponentStore);

const curLength = ref(0);
const curWidth = ref(0);
const cmTranslatePX = computed(() => {
	// 一个刻度代表10cm, 单位刻度间距默认是5px. 5px / 10cm = 0.5px = 1cm
	return commonStore.rulerConfig.minSpace / commonStore.rulerConfig.midDivision;
});

// x坐标
const directionX = computed({
	get() {
		const curComponent = curComponentList.value[0];
		return (Number(curComponent.x) / cmTranslatePX.value).toFixed();
	},
	set(val) {
		const id = curComponentList.value[0].id;
		console.log(val, cmTranslatePX.value, "设置值");
		// 100: 2
		// 200: 1
		topology.value?.setValue(
			{
				id,
				x: (Number(val) * cmTranslatePX.value) / commonStore.getScaleRatio,
			},
			{ render: true }
		);
	},
});

// y坐标
const directionY = computed({
	get() {
		const curComponent = curComponentList.value[0] || {};
		return (Number(curComponent.y) / cmTranslatePX.value).toFixed();
	},
	set(val) {
		const id = curComponentList.value[0].id;
		topology.value?.setValue(
			{
				id,
				y: (Number(val) * cmTranslatePX.value) / commonStore.getScaleRatio,
			},
			{ render: true }
		);
	},
});

watch(
	() => curComponentList.value[0],
	(newVal) => {
 		const { width, height } = newVal;
		curLength.value = Number((Number(width) / cmTranslatePX.value).toFixed());
		curWidth.value = Number((Number(height) / cmTranslatePX.value).toFixed());
	},
	{
		deep: true
	}
);

// 改变选中的x y坐标与长宽
function changePositionHandle(type: "x" | "y" | "length" | "width") {
	const id = curComponentList.value[0].id;
	console.log("change", curLength.value);
	let data;
	const geometryMap = {
		length: "width",
		width: "height",
		x: "x",
		y: "y",
	};
	if (type === "length") {
		data = (curLength.value * cmTranslatePX.value) / commonStore.getScaleRatio;
	} else if (type === "width") {
		data = (curWidth.value * cmTranslatePX.value) / commonStore.getScaleRatio;
	} else {
		data = Number(curComponentList.value[0][type]);
	}
	topology.value?.setValue({ id, [geometryMap[type]]: data }, { render: true });
}
</script>
